<!--保证金冻结-->
<template>
  <div class="all bg1">
    <template v-if="data">

      <!--总资产-->
      <div class="assets bg2">
        <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>

        <div class="row acenter">
          <text class="font32 text2 all">{{T('可用')+'：'+data.vtn+' VTN'}}</text>
          <div class="widht10"></div>
          <LImage class="img-explain" :src="Config.img('v2_wenhao.png')" @click="vtnClick"></LImage>
        </div>
        <div class="height10"></div>
        <div class="row acenter">
          <text class="font24 text3 all">{{T('余额')+'：'+data.VTN+' VTN'}}</text>
          <text class="font24 text3 ">{{T('冻结')+'：'+data.vtnFreeze+' VTN'}}</text>
        </div>

        <div class="height40"></div>
        <div class="line line1"></div>
        <div class="height40"></div>
        <text class="font32 text2">{{T('可用')+'：'+data.usdt+' USDT '}}</text>
        <div class="height10"></div>
        <div class="row acenter">
          <text class="font24 text3 all">{{T('余额')+'：'+data.USDT+' USDT'}}</text>
          <text class="font24 text3 ">{{T('冻结折合')+'：'+data.usdtFreeze+' USDT'}}</text>
        </div>
      </div>

      <!--项目--> 
      <VTitle class="title" :title="T('保证金项目')"></VTitle>
      <list class="list">
        <cell v-for="(item, index) in datas" v-bind:key="index">

          <div class="cell" v-if="item.projectName">
   
            <div class="row aEnd">
              <div class="row acenter all">
                <text class="font32 text2">{{item.projectName}}</text>
                <div class="width20"></div>
                <LImage class="img-explain" :src="Config.img('v2_wenhao.png')" @click="explainClick(item)"></LImage>
              </div>
              <text class="font24 text3">{{T('已冻结')}}</text>
            </div>

            <div class="height12"></div>
            <div class="row">
              <text class="font24 text3">{{item.projectNum}}</text>
              <text class="font24 text2 all tRight">{{item.freezeAmount + ' ' + item.coinType}}</text>
            </div>
          </div>
          <div class="line line1" v-if="item.projectName"></div>


          <div class="genduo-bg" v-else>
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>
      </list>
    </template>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.img-arrow {
  width: 15px;
  height: 22px;

  margin-left: 20px;
}
.img-explain {
  width:26px;
  height:26px;
}
.line{
  height: 1;
}

/***************** 总资产*/
.assets {
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 45px;
  padding-right: 40px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
}

/*************** 标题*/
.title {
  margin-top: 40px;
  margin-left: 40px;
}

/*************** 列表*/
.list {
  flex: 1;
}
.cell{
  flex-direction: column;

  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.cell-explain {
  width: 30px;
  height: 30px;
  margin-left: 20px;
}

/*********************** 刷新*/
.genduo-bg {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/***************** 间距*/
.height12{
  height: 12px;
}
.height16{
  height: 16px;
}
</style>

<script>


//组件
import VTitle from '@/wallet/view/VTitle.vue';  //标题

//功能
import jnavigator from "@/_js/navigator";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jhttps from "@/_js/https";
import jdebug from "@/_js/debug";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('保证金冻结'));

export default {
  
  components: {
    VTitle,
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      data:undefined,
      datas:[],
    };
  },

  created() {
    this.httpsQueryDetail();
  },

  methods: {

    initData(data){

      data.VTN = jmath.gfCoin(data.VTN, 'VTN', false);
      data.vtnFreeze = jmath.gfCoin(data.vtnFreeze, 'VTN', false);
      data.vtn = jmath.jian(data.VTN, data.vtnFreeze);

      data.USDT = jmath.gfCoin(data.USDT, 'USDT', false);
      data.usdtFreeze = jmath.gfCoin(data.usdtFreeze, 'USDT', false);
      data.usdt = jmath.jian(data.USDT, data.usdtFreeze);

      var datas = data.freezeRecodeList;
      datas.push('');
      this.datas = datas;

      return data;
    },

    /*******************************HTTP*/
    //https 保证金冻结详情
    httpsQueryDetail(){
    
      jmodal.showLoad();
      var param = {};
      jhttps.post("wallet/queryDepositWalletDetail",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          data = data.data;
          this.data = this.initData(data);
        } else{
          jmodal.toast(data.msg);
        }
      });
    },

    /******************************* 点击*/
    //vtn说明
    vtnClick() {

      var str1 = "保证金：用于保证金项目的抵扣，支付的最大金额即保证金全额，不会超支抵扣。"
      var str2 = "可用保证金：可用于保证金抵扣的余额，下降至0时项目将被强制终止结算。"
      var str3 = "可用保证金=保证金余额-冻结保证金。"
      var str = T(str1) + '\n\r' + T(str2) + '\n\r' + T(str3);
      jmodal.alert(str,(bool)=>{});
    },

    //保证金说明
    explainClick(item) {

      var map = item.advanceSetting;
      var param = {'profitLayer':map.profitLayer,
                  'riskIndemnityComment':map.riskIndemnityComment,
                  'startTime':item.startTime};
      jnavigator.openDialog('wallet/EnsureExplain', param);
    }
  }
}
</script>